<template>
  <Layout nav-title="消息中心">
    <view class="message-page">
      <view class="message-title">问诊消息列表</view>
      <view class="message-list">
        <view
          class="message-item"
          v-for="(message, index) in messages"
          :key="index"
          @click="openMessage(message)"
        >
          <image class="msg-avatar" :src="message.avatar" mode="aspectFill" />
          <view class="msg-main">
            <view class="msg-row">
              <text class="msg-name">{{ message.name }}</text>
              <view class="msg-tag" :class="message.tagType">{{ message.tag }}</view>
              <text class="msg-time">{{ message.time }}</text>
            </view>
            <view class="msg-preview">{{ message.preview }}</view>
          </view>
          <view v-if="message.unread" class="msg-unread">
            <text class="msg-unread-text">{{ message.unread }}</text>
          </view>
        </view>
      </view>
    </view>
  </Layout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Layout from '@/components/Layout.vue'
import { useMemberStore } from '@/store'
import { onShow } from '@dcloudio/uni-app'
interface Message {
  id: number
  name: string
  avatar: string
  tag: string
  tagType: string
  time: string
  preview: string
  unread?: number
}

const memberStore = useMemberStore()
onShow(() => {
  if (!memberStore.isLogin) {
    uni.navigateTo({
      url: '/pages/login/login',
    })
  }
})
const messages = ref<Message[]>([
  {
    id: 1,
    name: '医生姓名',
    avatar:
      'https://img1.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=100',
    tag: '主任医师',
    tagType: 'doctor1',
    time: '10:20',
    preview: '消息消息消息预览...',
    unread: 1,
  },
  {
    id: 2,
    name: '医生姓名',
    avatar:
      'https://img1.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=100',
    tag: '主治医师',
    tagType: 'doctor2',
    time: '10:20',
    preview: '消息消息消息预览...',
    unread: 3,
  },
  {
    id: 3,
    name: '医生姓名',
    avatar:
      'https://img1.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=100',
    tag: '专家',
    tagType: 'expert',
    time: '10:20',
    preview: '消息消息消息预览...',
  },
  {
    id: 4,
    name: '患者姓名',
    avatar:
      'https://img2.baidu.com/it/u=987654321,987654321&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=100',
    tag: '患者',
    tagType: 'patient',
    time: '10:20',
    preview: '消息消息消息预览...',
  },
])

const openMessage = (message: Message) => {
  // uni.showToast({
  //   title: `打开消息：${message.name}`,
  //   icon: 'none',
  // })
  uni.navigateTo({
    url: '/pages/component/xiaoxi/xiaoxi',
  })
}
</script>

<style scoped>
.message-page {
  padding: 40rpx;
  background: #ededed;
  min-height: 100vh;
}
.message-title {
  text-align: center;
  font-size: 40rpx;
  font-weight: bold;
  color: #444;
  margin-bottom: 36rpx;
}
.message-list {
  display: flex;
  flex-direction: column;
  gap: 36rpx;
}
.message-item {
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  padding: 28rpx 32rpx;
  position: relative;
}
.msg-avatar {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 24rpx;
  background: #e0e0e0;
  flex-shrink: 0;
}
.msg-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.msg-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.msg-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-right: 16rpx;
}
.msg-tag {
  font-size: 22rpx;
  padding: 0 18rpx;
  height: 36rpx;
  line-height: 36rpx;
  border-radius: 18rpx;
  margin-right: 16rpx;
  color: #fff;
  font-weight: 500;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.msg-tag.doctor1 {
  background: linear-gradient(90deg, #4faaff 0%, #3e7fff 100%);
}
.msg-tag.doctor2 {
  background: linear-gradient(90deg, #6fd6ff 0%, #3e7fff 100%);
}
.msg-tag.expert {
  background: linear-gradient(90deg, #4faaff 0%, #6fd6ff 100%);
}
.msg-tag.patient {
  background: linear-gradient(90deg, #ff9800 0%, #ff4d4f 100%);
}
.msg-time {
  margin-left: auto;
  font-size: 28rpx;
  color: #888;
  font-weight: 500;
}
.msg-preview {
  font-size: 26rpx;
  color: #999;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-unread {
  position: absolute;
  right: 32rpx;
  top: 65%;
  transform: translateY(-50%);
  background: #19c37c;
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(25, 195, 124, 0.15);
}
.msg-unread-text {
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
}
</style>
